<template>
  <div>
    <!-- 面包屑导航 -->
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb> -->
    <el-bread></el-bread>
    <!-- 添加按钮 -->
    <el-button @click="addDialog" class="btnInfo" type="primary" size="small" plain>添加</el-button>
    <!-- 列表展示表格 -->
    <v-list @edit="edit"></v-list>
    <!-- 显示弹框 -->
    <v-dialog ref="diaInfo" @cancel="cancel" :addInfo="addInfo"></v-dialog>
  </div>
</template>

<script>
import vDialog from './dialog.vue';
import vList from './list.vue';
export default {
  data() {
    return {
      addInfo: {
        //用来控制表单显示隐藏
        isShow: false,
        isAdd: true,//添加
      }
    };
  },
  components: {
    vDialog,
    vList
  },
  methods: {
    //打开弹框的事件
    addDialog() {
      //显示弹框
      this.addInfo.isShow = true
      this.addInfo.isAdd = true
    },
    cancel(e) {
      this.addInfo.isShow = e
    },
    //打开弹框
    edit(e) {
      this.addInfo.isShow = true;
      //告诉你弹框是一个编辑
      this.addInfo.isAdd = false;
      this.$refs.diaInfo.lookup(e)
    }
  }
};
</script>

<style scoped>
.btnInfo {
  margin: 10px 5px;
}
</style>
